<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('新增课程信息')"/>
        <th:block th:include="include :: bootstrap-fileinput-css"/>
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-course-add">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">课程名称：</label>
                    <div class="col-sm-8">
                        <input name="courseName" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">所属学科：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input id="treeId" name="subjectId" type="hidden" />
                            <input class="form-control" type="text" onclick="selectManageTree()" id="treeName" readonly="true" >
                            <span class="input-group-addon" ><i class="fa fa-remove" id="clearBtn"></i></span>
                        </div>
                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程封面图片：</label>
                    <div class="col-sm-8">
                        <input name="coverUrl" id="coverUrl" class="form-control" type="hidden">
                        <input name="host" id="host" class="form-control" type="hidden">
                        <div class="file-loading">
                            <input class="file" type="file" id="file" name="file" data-min-file-count="1" data-theme="fas">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程学分：</label>
                    <div class="col-sm-8">
                        <select name="courseScore" class="form-control m-b"
                                th:with="type=${@dict.getType('course_score_value')}">
                            <option value="">请选择</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程介绍：</label>
                    <div class="col-sm-8">
                        <textarea name="introduce" maxlength="1000" class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目类型：</label>
                    <div class="col-sm-8">
                        <select name="projectType" class="form-control m-b"
                                th:with="type=${@dict.getType('course_project_type')}">
                            <option value="">请选择</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目编号：</label>
                    <div class="col-sm-8">
                        <input name="projectNumber" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目负责人：</label>
                    <div class="col-sm-8">
                        <input name="projectLeader" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目负责单位：</label>
                    <div class="col-sm-8">
                        <input name="projectOrg" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程学分类型：</label>
                    <div class="col-sm-8">
                        <select name="courseScoreType" class="form-control m-b"
                                th:with="type=${@dict.getType('course_score_type')}">
                            <option value="">请选择</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程学分编号：</label>
                    <div class="col-sm-8">
                        <input name="scoreNumber" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">关注度：</label>
                    <div class="col-sm-8">
                        <select name="focusScore" class="form-control m-b"
                                th:with="type=${@dict.getType('course_score_value')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">显示顺序：</label>
                    <div class="col-sm-8">
                        <input name="orderNum" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">状态：</label>
                    <div class="col-sm-8">
                        <div class="radio-box">
                            <input type="radio" name="visible" value="0" checked>
                            <label>显示</label>
                        </div>
                        <div class="radio-box">
                            <input type="radio" name="visible" value="1">
                            <label>隐藏</label>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: bootstrap-fileinput-js"/>
        <script type="text/javascript">
            var prefix = ctx + "biz/course"
            $("#form-course-add").validate({
                                               focusCleanup: true
                                           });

            function submitHandler() {
                if ($.validate.form()) {
                    $.operate.save(prefix + "/add", $('#form-course-add').serialize());
                }
            }

            $("#file").fileinput({
                                     'theme': 'explorer-fas',
                                     'uploadUrl': ctx + "common/upload",
                                     language:'zh',
                                     overwriteInitial: true,
                                     allowedFileExtensions :['jpg', 'gif', 'png'],
                                     dropZoneEnabled:false,
                                     autoReplace: true,
                                     maxFileCount: 1,
                                     initialPreviewAsData: true,
                                     // initialPreview: [
                                     //     // "/img/profile.jpg"
                                     // ],
                                     showUploadedThumbs:false,
                                     showUpload: false,
                                 });

            $("#file").on("filebatchselected", function (event, data) {//选择即上传
                if (!!!data[0]) {
                    $(this).fileinput("upload") // 上传文件
                }
            })
            $("#file").on("fileuploaded", function (event, data, previewId, index) {
                console.log(event)
                console.log(data)
                const result = data.response
                if (+result.code == +web_status.SUCCESS) {
                    $('#coverUrl').val(result.url)
                    $('#host').val(result.host)
                } else {
                    $.modal.alertError(result.msg);
                }
                console.log('图路径:'+$('#host').val()+$('#coverUrl').val())
            })

            function selectManageTree() {
                var options = {
                    title: '学科管理选择',
                    width: "380",
                    url: ctx + "biz/subject/selectManageTree/" + $("#treeId").val(),
                    callBack: treeCallBack
                };
                $.modal.openOptions(options);
            }

            function treeCallBack(index, layero){
                var body = layer.getChildFrame('body', index);
                $("#subjectId").val(body.find('#treeId').val());
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                layer.close(index);
            }

        </script>
    </body>
</html>